<div class="content">
    <div id="example_title" style="max-width: 900px">
        <h1>Linked Lists</h1>
        If a list is dependent on another list, now you can defined the parentList and parentId and it will automatically filter dependent
        list to only have items with the same parent id
    </div>
    <div id="example_view">
        See <a href="http://w2ui.com/web/docs/w2form.fields" target="_blank">options</a> for more information
    </div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="form" style="width: 750px;"></div>

<!--CODE-->
<script type="module">
import { w2form, query, w2ui, w2popup, w2alert, w2utils } from '__W2UI_PATH__'

let samples = [
    { id: "elephant", text: "Elephant", parent: "mammals" },
    { id: "dog", text: "Dog", parent: "mammals" },
    { id: "human", text: "Human", parent: "mammals" },

    { id: "eagle", text: "Eagle", parent: "birds" },
    { id: "parrot", text: "Parrot", parent: "birds" },
    { id: "penguin", text: "Penguin", parent: "birds" },

    { id: "snake", text: "Snake", parent: "reptiles" },
    { id: "lizard", text: "Lizard", parent: ["weird", "reptiles"] },
    { id: "crocodile", text: "Crocodile", parent: "reptiles" },

    { id: "frog", text: "Frog", parent: "amphibians" },
    { id: "salamander", text: "Salamander", parent: "amphibians" },
    { id: "newt", text: "Newt", parent: ["weird", "amphibians"] },

    { id: "salmon", text: "Salmon", parent: "fish" },
    { id: "shark", text: "Shark", parent: "fish" },
    { id: "clownfish", text: "Clownfish", parent: ["weird", "fish"] },

    { id: "ant", text: "Ant", parent: "insects" },
    { id: "butterfly", text: "Butterfly", parent: "insects" },
    { id: "beetle", text: "Beetle", parent: "insects" },

    { id: "spider", text: "Spider", parent: "arachnids" },
    { id: "scorpion", text: "Scorpion", parent: "arachnids" },
    { id: "tick", text: "Tick", parent: "arachnids" },

    { id: "crab", text: "Crab", parent: "crustaceans" },
    { id: "lobster", text: "Lobster", parent: "crustaceans" },
    { id: "shrimp", text: "Shrimp", parent: "crustaceans" },

    { id: "snail", text: "Snail", parent: "mollusks" },
    { id: "octopus", text: "Octopus", parent: "mollusks" },
    { id: "clam", text: "Clam", parent: "mollusks" },

    { id: "starfish", text: "Starfish", parent: "echinoderms" },
    { id: "sea_urchin", text: "Sea Urchin", parent: ["weird", "echinoderms"] },
    { id: "sea_cucumber", text: "Sea Cucumber", parent: ["weird", "echinoderms"] }
]
let form = new w2form({
    box: '#form',
    name: 'form',
    header: 'Linked Lists',
    url: 'server/post',
    fields: [
        { field: 'group',  type: 'list', required: false,
            html: {
                label: 'Animal Group',
                attr: 'style="width: 180px"',
                style: '',
                text: '<span style="margin-left: 10px; font-size: 12px">←</span> Change to trigger dependent fields'
            },
            options: {
                // you can optionally define itemMap were you can provide mapping to id and text fields
                itemMap: {
                    id: 'info.group', // can be nested, then it is parsed
                    text: 'info.name'
                },
                items: [
                    { info: { group: '', name: 'Show All' }},
                    { info: { group: "weird", name: 'Weird Ones' }},
                    { text: "--" }, // just a separator
                    { info: { group: "mammals", name: "Mammals" }},
                    { info: { group: "birds", name: "Birds" }},
                    { info: { group: "reptiles", name: "Reptiles" }},
                    { info: { group: "amphibians", name: "Amphibians" }},
                    { info: { group: "fish", name: "Fish" }},
                    { info: { group: "insects", name: "Insects" }},
                    { info: { group: "arachnids", name: "Arachnids" }},
                    { info: { group: "crustaceans", name: "Crustaceans" }},
                    { info: { group: "mollusks", name: "Mollusks" }},
                    { info: { group: "echinoderms", name: "Echinoderms" }},
                ]
            }
        },
        { field: 'list1',  type: 'list', required: false,
            html: {
                label: 'Dropdown List',
                attr: 'style="width: 180px"',
            },
            options: {
                parentList: 'group',
                parentField: 'parent', // field inside items objects that contains id from parent list (default is "parentId")
                items: w2utils.clone(samples)
            }
        },
        { field: 'list2',  type: 'switch', required: false,
            html: {
                label: 'Swtich',
                attr: 'style=""'
            },
            options: {
                parentList: 'group',
                parentField: 'parent', // field inside items objects that contains id from parent list (default is "parentId")
                items: w2utils.clone(samples)
            }
        },
        { field: 'list3',  type: 'radio', required: false,
            html: {
                label: 'Radio List',
                attr: 'style="max-width: 200px; max-height: 200px; overflow: auto"'
            },
            options: {
                parentList: 'group',
                parentField: 'parent', // field inside items objects that contains id from parent list (default is "parentId")
                items: w2utils.clone(samples)
            }
        },
        { field: 'list4',  type: 'checks', required: false,
            html: {
                label: 'Check List',
                attr: 'style="max-width: 200px; max-height: 200px; overflow: auto"'
            },
            options: {
                parentList: 'group',
                parentField: 'parent', // field inside items objects that contains id from parent list (default is "parentId")
                items: w2utils.clone(samples)
            }
        },
    ],
    record: {
        group: 'fish',
        list1: 'salmon',
        list2: 'shark',
        list3: 'shark',
        list4: 'shark',
    },
    actions: {
        Reset(event) {
            this.clear();
        },
        Save(event) {
            if (w2ui.form.validate().length == 0) {
                w2popup.open({
                    title: 'Form Data',
                    with: 600,
                    height: 550,
                    body: `<pre>${JSON.stringify(this.getCleanRecord(), null, 4)}</pre>`,
                    actions: { Ok: w2popup.close }
                })
            }
        },
        custom: {
            text: '<span style="font-size: 16px">←</span> click to see data',
            class: 'custom-class',
            style: 'background-image: none; background-color: transparent; border: 0px; margin: 0 0 0 -10px;',
            onClick() {
                w2alert('Not me!! The other button')
            }
        }
    }
});
</script>
